2017年05月15日星期一
说明:本文部分内容均来自慕课网。@慕课网:http://www.imooc.com
教学示例源码:无
个人学习源码:https://github.com/zccodere/s...
第一章:大V有话说
1-1 各种叨唠
什么是MVC
Model
View
Controller
MVC是一种设计模式
MVC不仅是设计模式,更是高于框架和设计模式的
MVC是一种思想
MVC优点
低耦合性
高重用性
低开发成本
高可维护性
第二章:UIWindow-界面来了
2-1 UIWindow-1
UIWindow1
我们的手机界面
UIWindow实例化
UIWindow的级别
2-1 UIWindow-2
window的作用
作为一个大容器,包含很多子view
可以转递触摸消息到控件
代码演示:
// 实例化window
_window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// 给window设置背景颜色
_window.backgroundColor = [UIColor redColor];
// 指定viewcontroller
_window.rootViewController = [[UIViewController alloc] init];
// 成为主window
[_window makeKeyAndVisible];
第三章:UIView-所有控件的载体
3-1 UIView-1
UIView
UI的基类,基础
UIVew的属性
UIView的方法
UIView的自适应
代码演示:
// 创建视图
UIView *view1 = [[UIView alloc] init];
// 设置边框-位置大小
view1.frame = CGRectMake(10, 30, 394, 696);
// 背景颜色
view1.backgroundColor = [UIColor redColor];
// 将视图加入到父视图中
[self.view addSubview:view1];
3-2 UIView-2
视图frame属性
x:距左上角的水平距离
y:距左上角的垂直距离
width:宽度
height:高度
代码演示:
/*
机型 屏幕尺寸 分辨率 倍率 图片分辨率
3GS 3.5寸 320*480 @1x
4/4s 3.5寸 320*480 @2x 640*960
5/5c/5s 4.0寸 320*568 @2x 640*1136
6 4.7寸 375*667 @2x 750*1334
6plus 5.5寸 414*736 @3x 1242*2208
*/
// 3-2
// 获取当前屏幕
int width = [[UIScreen mainScreen] bounds].size.width;
int height = [[UIScreen mainScreen] bounds].size.height;
NSLog(@"width:%d height:%d",width,height);
3-3 UIView-3
代码演示:
// 状态栏高度为20px,我们在设置控件frame时需要让出20px。
NSLog(@"x:%f y:%f w:%f h:%f",view1.frame.origin.x,view1.frame.origin.y,view1.frame.size.width,view1.frame.size.height);
// bounds 边框大小,x和y永远为0
NSLog(@"x:%f y:%f w:%f h:%f",view1.bounds.origin.x,view1.bounds.origin.y,view1.bounds.size.width,view1.bounds.size.height);
// center 中心点
NSLog(@"x:%f y:%f",view1.center.x,view1.center.y);
3-4 UIView-4
代码演示:
// 父视图
UIView *superView = view1.superview;
superView.backgroundColor = [UIColor greenColor];
// 坐标是根据父视图的位置来设置的,不会垮层
UIView *view2 = [[UIView alloc] init];
view2.frame = CGRectMake(10, 100, 300, 30);
view2.backgroundColor = [UIColor blackColor];
// 视图唯一标识
view2.tag = 2;
[view1 addSubview:view2];
UIView *view3 = [[UIView alloc] init];
view3.frame = CGRectMake(20, 50, 100, 100);
view3.backgroundColor = [UIColor purpleColor];
// 视图唯一标识
view3.tag = 3;
[view1 addSubview:view3];
// 子视图
// 方式一:获取全部子视图
NSArray *subViewArray = view1.subviews;
for (UIView *viewTemp in subViewArray) {
if(viewTemp.tag == 2){
viewTemp.backgroundColor = [UIColor whiteColor];
}
}
// 方式二:通过tag值获取对应的子视图
UIView *subView = [view1 viewWithTag:3];
subView.backgroundColor = [UIColor orangeColor];
3-5 UIView-5
层级的处理
1.同一个父视图中先加入的View会被盖在下面
2.子视图是跟随父视图进行层级遮挡,如果父视图低于其它同级视图,则父视图的子视图也会被盖住,但是子视图和其它视图的子视图是没有关系的
3.交换两个层的视图时需要注意必须填写正确的层级数
4.当层交换了之后对应子视图的数组下标也会进行改变
代码演示:
// 层级的处理
/*
1.同一个父视图中先加入的View会被盖在下面
2.子视图是跟随父视图进行层级遮挡,如果父视图低于其它同级视图,则父视图的子视图也会被盖住,但是子视图和其它视图的子视图是没有关系的
3.交换两个层的视图时需要注意必须填写正确的层级数
4.当层交换了之后对应子视图的数组下标也会进行改变
*/
UIView *view4 = [[UIView alloc] init];
view4.frame = CGRectMake(10, 100, 300, 300);
view4.backgroundColor = [UIColor yellowColor];
//[self.view addSubview:view4];
// 交换两个层的视图
[view1 exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
// 插入一个视图到指定层
UIView *view5 = [[UIView alloc] init];
view5.frame = CGRectMake(7, 80, 200, 200);
view5.backgroundColor = [UIColor blackColor];
//[view1 insertSubview:view5 atIndex:2];//插入一个视图到指定层
//[view1 insertSubview:view5 aboveSubview:view3];//插入一个视图到指定视图的上面
[view1 insertSubview:view5 belowSubview:view2];//插入一个视图到指定视图的下面
// 将一个View放入最顶层或者最底层
// 最顶层
[view1 bringSubviewToFront:view3];
// 最底层
[view1 sendSubviewToBack:view3];
3-6 UIView-6
代码演示:
// 自适应
UIView *backView = [[UIView alloc] init];
backView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-25, 400, 50, 50);
// 准许子视图自适应
backView.autoresizesSubviews = YES;
backView.tag = 1001;
backView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:backView];
UIView *topView = [[UIView alloc] init];
topView.frame = CGRectMake(10, 10, 30, 30);
topView.backgroundColor = [UIColor greenColor];
// 设置子视图的适应方式
topView.autoresizingMask =
// UIViewAutoresizingFlexibleRightMargin |
// UIViewAutoresizingFlexibleLeftMargin |
// UIViewAutoresizingFlexibleTopMargin |
// UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight;
[backView addSubview:topView];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake(10, 550, 355, 30);
btn.backgroundColor = [UIColor blackColor];
[btn addTarget:self action:@selector(bntClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
本章完整代码:
//
// ViewController.m
// UIView
//
// Created by zc on 2017/5/15.
// Copyright © 2017年 com.zccoder. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 3-1
// 创建视图
UIView *view1 = [[UIView alloc] init];
// 设置边框-位置大小
view1.frame = CGRectMake(10, 30, 394, 696);
// 背景颜色
view1.backgroundColor = [UIColor redColor];
// 将视图加入到父视图中
[self.view addSubview:view1];
/*
机型 屏幕尺寸 分辨率 倍率 图片分辨率
3GS 3.5寸 320*480 @1x
4/4s 3.5寸 320*480 @2x 640*960
5/5c/5s 4.0寸 320*568 @2x 640*1136
6 4.7寸 375*667 @2x 750*1334
6plus 5.5寸 414*736 @3x 1242*2208
*/
// 3-2
// 获取当前屏幕
int width = [[UIScreen mainScreen] bounds].size.width;
int height = [[UIScreen mainScreen] bounds].size.height;
NSLog(@"width:%d height:%d",width,height);
// 3-3
// 状态栏高度为20px,我们在设置控件frame时需要让出20px。
NSLog(@"x:%f y:%f w:%f h:%f",view1.frame.origin.x,view1.frame.origin.y,view1.frame.size.width,view1.frame.size.height);
// bounds 边框大小,x和y永远为0
NSLog(@"x:%f y:%f w:%f h:%f",view1.bounds.origin.x,view1.bounds.origin.y,view1.bounds.size.width,view1.bounds.size.height);
// center 中心点
NSLog(@"x:%f y:%f",view1.center.x,view1.center.y);
// 3-4
// 父视图
UIView *superView = view1.superview;
superView.backgroundColor = [UIColor greenColor];
// 坐标是根据父视图的位置来设置的,不会垮层
UIView *view2 = [[UIView alloc] init];
view2.frame = CGRectMake(10, 100, 300, 30);
view2.backgroundColor = [UIColor blackColor];
// 视图唯一标识
view2.tag = 2;
[view1 addSubview:view2];
UIView *view3 = [[UIView alloc] init];
view3.frame = CGRectMake(20, 50, 100, 100);
view3.backgroundColor = [UIColor purpleColor];
// 视图唯一标识
view3.tag = 3;
[view1 addSubview:view3];
// 子视图
// 方式一:获取全部子视图
NSArray *subViewArray = view1.subviews;
for (UIView *viewTemp in subViewArray) {
if(viewTemp.tag == 2){
viewTemp.backgroundColor = [UIColor whiteColor];
}
}
// 方式二:通过tag值获取对应的子视图
UIView *subView = [view1 viewWithTag:3];
subView.backgroundColor = [UIColor orangeColor];
//3-5
// 层级的处理
/*
1.同一个父视图中先加入的View会被盖在下面
2.子视图是跟随父视图进行层级遮挡,如果父视图低于其它同级视图,则父视图的子视图也会被盖住,但是子视图和其它视图的子视图是没有关系的
3.交换两个层的视图时需要注意必须填写正确的层级数
4.当层交换了之后对应子视图的数组下标也会进行改变
*/
UIView *view4 = [[UIView alloc] init];
view4.frame = CGRectMake(10, 100, 300, 300);
view4.backgroundColor = [UIColor yellowColor];
//[self.view addSubview:view4];
// 交换两个层的视图
[view1 exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
// 插入一个视图到指定层
UIView *view5 = [[UIView alloc] init];
view5.frame = CGRectMake(7, 80, 200, 200);
view5.backgroundColor = [UIColor blackColor];
//[view1 insertSubview:view5 atIndex:2];//插入一个视图到指定层
//[view1 insertSubview:view5 aboveSubview:view3];//插入一个视图到指定视图的上面
[view1 insertSubview:view5 belowSubview:view2];//插入一个视图到指定视图的下面
// 将一个View放入最顶层或者最底层
// 最顶层
[view1 bringSubviewToFront:view3];
// 最底层
[view1 sendSubviewToBack:view3];
//3-6
// 自适应
UIView *backView = [[UIView alloc] init];
backView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-25, 400, 50, 50);
// 准许子视图自适应
backView.autoresizesSubviews = YES;
backView.tag = 1001;
backView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:backView];
UIView *topView = [[UIView alloc] init];
topView.frame = CGRectMake(10, 10, 30, 30);
topView.backgroundColor = [UIColor greenColor];
// 设置子视图的适应方式
topView.autoresizingMask =
// UIViewAutoresizingFlexibleRightMargin |
// UIViewAutoresizingFlexibleLeftMargin |
// UIViewAutoresizingFlexibleTopMargin |
// UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight;
[backView addSubview:topView];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake(10, 550, 355, 30);
btn.backgroundColor = [UIColor blackColor];
[btn addTarget:self action:@selector(bntClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
}
- (void)bntClick {
UIView *view = [self.view viewWithTag:1001];
view.frame = CGRectMake(view.frame.origin.x-5, view.frame.origin.y-5, view.frame.size.width+10, view.frame.size.height+10);
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
第四章:UILable-千变万幻的文字
4-1 UILable-1
UILable
文本标签
UIColor颜色类
代码演示:
UILabel *lable = [[UILabel alloc] init];
lable.frame = CGRectMake(10, 100, 350, 300);
lable.backgroundColor = [UIColor yellowColor];
// 文本
lable.text = @"网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你.网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你.网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你.";
// 文字布局模式
lable.textAlignment = NSTextAlignmentCenter;
// 文字的颜色
//lable.textColor = [UIColor clearColor];//clearColor 透明色
lable.textColor = [UIColor colorWithRed:0.1 green:0.8 blue:0.2 alpha:1];
// alpha 透明度
//lable.alpha = 0.5;
4-2 UILable-2
多文字处理
1.Label要有足够的大小
2.设置换行模式
3.设置显示行数(0或-1不限制行数)
代码演示:
// 字体的设置
lable.font = [UIFont systemFontOfSize:25];
// 加粗或倾斜
lable.font = [UIFont boldSystemFontOfSize:25];
lable.font = [UIFont italicSystemFontOfSize:25];
// 遍历系统已安装的字体
for(NSString *name in [UIFont familyNames]){
NSLog(@"fontName:%@",name);
}
// 设置字体和大小
lable.font = [UIFont fontWithName:@"Bodoni 72" size:20];
// 设置阴影
//lable.shadowColor = [UIColor redColor];
//lable.shadowOffset = CGSizeMake(-2, -2);
// 处理多文字
// 1.Label要有足够的大小
// 2.设置换行模式
lable.lineBreakMode = NSLineBreakByCharWrapping;
// 3.设置显示行数(0或-1不限制行数)
lable.numberOfLines = 0;
4-3 UILable-3
代码演示:
// 根据字符串大小计算Label的大小
CGSize size = [lable.text sizeWithFont:lable.font constrainedToSize:CGSizeMake(355, 10000) lineBreakMode:NSLineBreakByCharWrapping];
lable.frame = CGRectMake(lable.frame.origin.x, lable.frame.origin.y, lable.frame.size.width, size.height);
[self.view addSubview:lable];
本章完整代码:
//
// ViewController.m
// UILable
//
// Created by zc on 2017/5/15.
// Copyright © 2017年 com.zccoder. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//self.view.backgroundColor = [UIColor redColor];
//4-1
UILabel *lable = [[UILabel alloc] init];
lable.frame = CGRectMake(10, 100, 350, 300);
lable.backgroundColor = [UIColor yellowColor];
// 文本
lable.text = @"网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你.网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你.网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你.";
// 文字布局模式
lable.textAlignment = NSTextAlignmentCenter;
// 文字的颜色
//lable.textColor = [UIColor clearColor];//clearColor 透明色
lable.textColor = [UIColor colorWithRed:0.1 green:0.8 blue:0.2 alpha:1];
// alpha 透明度
//lable.alpha = 0.5;
//4-2
// 字体的设置
lable.font = [UIFont systemFontOfSize:25];
// 加粗或倾斜
lable.font = [UIFont boldSystemFontOfSize:25];
lable.font = [UIFont italicSystemFontOfSize:25];
// 遍历系统已安装的字体
for(NSString *name in [UIFont familyNames]){
NSLog(@"fontName:%@",name);
}
// 设置字体和大小
lable.font = [UIFont fontWithName:@"Bodoni 72" size:20];
// 设置阴影
//lable.shadowColor = [UIColor redColor];
//lable.shadowOffset = CGSizeMake(-2, -2);
// 处理多文字
// 1.Label要有足够的大小
// 2.设置换行模式
lable.lineBreakMode = NSLineBreakByCharWrapping;
// 3.设置显示行数(0或-1不限制行数)
lable.numberOfLines = 0;
//4-3
// 根据字符串大小计算Label的大小
CGSize size = [lable.text sizeWithFont:lable.font constrainedToSize:CGSizeMake(355, 10000) lineBreakMode:NSLineBreakByCharWrapping];
lable.frame = CGRectMake(lable.frame.origin.x, lable.frame.origin.y, lable.frame.size.width, size.height);
[self.view addSubview:lable];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
第五章:UIImageView-图片显示的利器
5-1 UIImageView-1加载图片
UIImage&UIImageView
UIImage
UIImage载体
UIImageView
代码演示:
// UIImage png jpg
// 图片资源路径
NSString *path = [[NSBundle mainBundle] resourcePath];
NSString *imagePath = [NSString stringWithFormat:@"%@/1.jpg",path];
// 以路径形式加载 每一次使用时加载该资源,效率低,但占用内存少
UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];
// 以名称形式加载 第一次使用时加载进内存,效率高,但占用内存多
//UIImage *image1 = [UIImage imageNamed:@"1.jpg"];
// 载体
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// 图片显示在屏幕上的大小是有载体控制
//imageView.frame = CGRectMake(0, 30, image.size.height, image.size.width);
imageView.frame = CGRectMake(0, 20, 240, 320);
[self.view addSubview:imageView];
5-2 UIImageView-2内容模式
代码演示:
// 内容模式
//imageView.contentMode = UIViewContentModeCenter;//居中
//imageView.contentMode = UIViewContentModeScaleToFill;//拉伸-充满整个载体
imageView.contentMode = UIViewContentModeScaleAspectFill;//拉伸-不改变比例,充满最大的边
//imageView.contentMode = UIViewContentModeScaleAspectFit;//拉伸-不改变比例,充满最小的边
5-3 UIImageView-3
代码演示:
// UIImageView动画 播放序列图
NSMutableArray *imageArray = [[NSMutableArray alloc] init];
for(int i=1;i<=13;i++){
UIImage *imageTemp = [UIImage imageNamed:[NSString stringWithFormat:@"png%d.png",i]];
[imageArray addObject:imageTemp];
}
UIImageView *imageView2 = [[UIImageView alloc] init];
imageView2.frame = CGRectMake((self.view.frame.size.width-407)/2, 100, 407, 217);
// 设置动画数组
imageView2.animationImages = imageArray;
// 设置全部图片播放周期时间(单位:秒)
imageView2.animationDuration = 2;
// 播放多少次 执行次数(0:不限制次数)
imageView2.animationRepeatCount = 10;
// 开始播放动画
[imageView2 startAnimating];
// 停止播放动画
//[imageView2 stopAnimating];
[self.view addSubview:imageView2];
本章完整代码:
//
// ViewController.m
// UIImageView
//
// Created by zc on 2017/5/15.
// Copyright © 2017年 com.zccoder. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
#if 0
// 5-1
// UIImage png jpg
// 图片资源路径
NSString *path = [[NSBundle mainBundle] resourcePath];
NSString *imagePath = [NSString stringWithFormat:@"%@/1.jpg",path];
// 以路径形式加载 每一次使用时加载该资源,效率低,但占用内存少
UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];
// 以名称形式加载 第一次使用时加载进内存,效率高,但占用内存多
//UIImage *image1 = [UIImage imageNamed:@"1.jpg"];
// 载体
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// 图片显示在屏幕上的大小是有载体控制
//imageView.frame = CGRectMake(0, 30, image.size.height, image.size.width);
imageView.frame = CGRectMake(0, 20, 240, 320);
[self.view addSubview:imageView];
// 5-2
// 内容模式
//imageView.contentMode = UIViewContentModeCenter;//居中
//imageView.contentMode = UIViewContentModeScaleToFill;//拉伸-充满整个载体
imageView.contentMode = UIViewContentModeScaleAspectFill;//拉伸-不改变比例,充满最大的边
//imageView.contentMode = UIViewContentModeScaleAspectFit;//拉伸-不改变比例,充满最小的边
#endif
// 5-3
// UIImageView动画 播放序列图
NSMutableArray *imageArray = [[NSMutableArray alloc] init];
for(int i=1;i<=13;i++){
UIImage *imageTemp = [UIImage imageNamed:[NSString stringWithFormat:@"png%d.png",i]];
[imageArray addObject:imageTemp];
}
UIImageView *imageView2 = [[UIImageView alloc] init];
imageView2.frame = CGRectMake((self.view.frame.size.width-407)/2, 100, 407, 217);
// 设置动画数组
imageView2.animationImages = imageArray;
// 设置全部图片播放周期时间(单位:秒)
imageView2.animationDuration = 2;
// 播放多少次 执行次数(0:不限制次数)
imageView2.animationRepeatCount = 10;
// 开始播放动画
[imageView2 startAnimating];
// 停止播放动画
//[imageView2 stopAnimating];
[self.view addSubview:imageView2];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
第六章:总结与预告
6-1 总结
总结
MVC
UIWindow
UIView
UILable
UIImage
UIImageView
预告
UIButton
UITextField
UITextView
UINavigationController
UIViewController
UISlider等
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。